import {designPage, onMounted, useRefs} from "@peryl/react-compose";
import {usePageService} from "../../../modules/micro/usePageService";
import {i18n, Icon, Tooltip} from "plain-design";
import {useEchartsColor} from "../../../components/useEchartsColor";
import {RollingNumber} from "../../../common/RollingNumber";

export default designPage(() => {

  const { microApp } = usePageService();

  const { refs, onRef } = useRefs({ chartEl: HTMLDivElement });

  const { color1, color6 } = useEchartsColor();

  onMounted(async () => {
    const echarts = await microApp.resource.load('echarts', window);
    const ins = echarts.init(refs.chartEl!);

    const dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
    const data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];

    const option = {
      grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
      },
      xAxis: { data: dataAxis, },
      yAxis: {
        splitLine: { show: false },
      },
      series: [
        {
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: color1 },
                { offset: 1, color: color6 }
              ]
            )
          },
          data: data
        }
      ]
    };

    ins.setOption(option);
  });

  return () => (
    <div className="pro-data-statistic-summary-card">
      <div className="pro-data-statistic-summary-card-title">
        <span>{i18n.$intl('page.dataStatistic.OrderStatistics').d('订单统计')}</span>
        <Tooltip message={i18n.$intl('page.dataStatistic.more').d('更多')}>
          <Icon icon="pi-apps"/>
        </Tooltip>
      </div>
      <div className="pro-data-statistic-summary-card-result">
        <RollingNumber val={1126}/>
      </div>
      <div ref={onRef.chartEl} className="pro-data-statistic-chart-el"/>
      <div className="pro-data-statistic-summary">
        <span>{i18n.$intl('page.dataStatistic.Conversion').d('转化率：')}</span>
        <span><RollingNumber val={42.11}/>%</span>
      </div>
    </div>
  );
});
